<template>
  <div class="radio-with-input">
    <span v-if="modelValue.label" class="label">{{ modelValue.label }}</span>
    <div class="radio-group">
      <div 
        v-for="option in modelValue.options" 
        :key="option.value"
        class="radio-item"
      >
        <el-radio 
          v-model="modelValue.selected" 
          :label="option.value"
        >
          {{ option.label }} 
        </el-radio>
        <!-- 如果设置了showInput，始终显示输入区域 -->
        <template v-if="option.showInput">
          <span v-if="option.inputLabel" class="input-label">{{ option.inputLabel }}：</span>
          <!-- 如果选项被选中，显示可编辑的输入框 -->
          <el-input 
            v-if="modelValue.selected === option.value"
            v-model="modelValue.inputValue"
            class="inline-input"
            placeholder="请输入"
            @change="handleInputChange"
          />
          <!-- 如果选项未被选中，显示横线占位符 -->
          <span v-else class="placeholder-line">____________________</span>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: Object,
    required: true
  }
})

defineEmits(['update:modelValue'])

const handleInputChange = () => {
  // trim 去除空格
  props.modelValue.inputValue = props.modelValue.inputValue.trim();
};
</script>

<style lang="scss" scoped>
.radio-with-input {
  display: flex;
  align-items: center;
  gap: 16px;

  .label {
    white-space: nowrap;
  }

  .radio-group {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .radio-item {
    display: flex;
    align-items: center;
    gap: 8px;

    .input-label {
      color: #666;
    }

    .inline-input {
      width: 200px;
    }

    .placeholder-line {
      color: #999;
      font-family: monospace;
      border-bottom: 1px solid #ddd;
      min-width: 200px;
      display: inline-block;
      height: 20px;
      line-height: 20px;
    }
  }
}
</style> 